<template>
  <!-- 底图 -->
  <BaseMap />
  <!-- 图层树目录 -->
  <Catalog />
  <!-- 导航条 -->
  <div id="nav">
    <!-- logo -->
    <img src="../../assets/images/logo.png" alt="" id="logo" />
    <a-menu mode="horizontal">
      <!-- 用户为管理员或者交警 -->
      <!-- ------实时路况 共有-------->
      <CurrentTraffic />
      <!-- ------------事件管理 交警------------>
      <Event v-if='traffic(userType)' />
      <!-- 公告管理 普通用户显示查看公告 交警 查看和公告-->
      <!-- 交警 -->
      <AnnouncementsManage v-if='traffic(userType)' />
      <!-- 普通用户 -->
      <ViewAnnouncements v-if='common(userType)' />
      <ViewAnnouncements v-if='admin(userType)' />
      <!-- -------------报告路况 共有------------ -->
      <ReportRoadConditions />
      <!-- ------------视频监控 交警-------------->
      <Monitor v-if='traffic(userType)' />
      <!-- ------工具箱 共有------------>
      <ToolBox />
    </a-menu>
    <!-- 搜索框 共有 -->
    <InputSearch />
    <!-- 用户登录 共有 -->
    <UserLogin />
    <!-- 点击查看公告的弹窗 -->
    <NoticeViewContainer />
    <!-- 点击添加公告 -->
    <PublishNotice />
  </div>

</template>

<script setup>
/* 地图 */
import BaseMap from 'components/BaseMap/index.vue'
/* 目录 */
import Catalog from 'components/Catalog.vue'
import CurrentTraffic from 'components/CurrentTraffic.vue'
/* 监控 */
import Monitor from 'components/Monitor.vue'
/* 工具箱 */
import ToolBox from 'components/ToolBox.vue'
/* 用户登录 */
import UserLogin from 'components/UserLogin/index.vue'
/* 搜索框 */
import InputSearch from 'components/InputSearch.vue'
/* 报告路况 */
import ReportRoadConditions from 'components/ReportRoadConditions.vue'
/* 事件 */
import Event from 'components/Event/index.vue'
/* 查看公告 */
import ViewAnnouncements from 'components/Announcements/ViewAnnouncements.vue'
/* 查看公告的弹窗 */
import NoticeViewContainer from 'components/Announcements/Notice/NoticeViewContainer.vue'
/* 点击添加公告 */
import PublishNotice from 'components/Announcements/Notice/PublishNotice.vue'
/* 公告管理 */
import AnnouncementsManage from 'components/Announcements/AnnouncementsManage.vue'
/* 导入菜单栏的权限控制 */
import { traffic, common, admin } from 'directive/menuRight'
/* 传入用户类型 */
let userType = JSON.parse(localStorage.getItem("onUser"))
console.log(userType[2]);
userType = userType[2]
</script>

<style lang="scss">
#nav {
  position: absolute;
  min-width: 1220px;
  top: 0;
  width: 100%;
  display: flex;
  align-items: center;
  height: 50px;
  font-weight: 600;
  background-color: rgba(255, 255, 255);
  z-index: 999;
}

// #navmenu {
//   width: 900px;
// }

.ant-menu-horizontal {
  color: #655e5e;
  font-size: 18px;
}

#logo {
  width: 155px;
  height: 40px;
  margin: 15px;
}

/* 搜索框 */
.search-event {
  max-width: 200px;
}

/* 头像 */
.ant-dropdown-link {
  position: absolute;
  right: 20px;

  img {
    width: 40px;
    height: 40px;
  }
}
</style>
<style>
.ant-menu-horizontal > .ant-menu-submenu > .ant-menu-submenu-title {
  padding: 0 10px
}

.ant-menu-vertical.ant-menu-sub,
.ant-menu-vertical-left.ant-menu-sub,
.ant-menu-vertical-right.ant-menu-sub {
  min-width: 50px;
}

.ant-menu {
  font-size: 16px;
}
</style>